import React, { useState, useEffect, useMemo } from 'react'
import { Table, Button } from 'antd'
import { DownloadOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
import Filter from './Filter'
import { useTableData } from '&/hooks'
import { getDeviceList } from '&/api/electricity'
import downloadExcelImg from '&/commonjs/downloadExcelImg'
import Container from '@/appComponents/Container'
import ExpandLayout from '&/components/ExpandLayout'
import { Card } from '&/appComponents/Antd'

const format = 'YYYY-MM-DD HH:mm'
const EquipmentSummary = () => {
  const user = JSON.parse(localStorage.getItem('user')) || {}
  const minuteStep15Time = useMemo(
    () => dayjs().subtract(dayjs().minute() % 15, 'minute'),
    []
  )
  const [paramsData, setParamsData] = useState({
    start_time: dayjs(minuteStep15Time).subtract(6, 'h').format(format),
    end_time: dayjs(minuteStep15Time).format(format),
    time_type: 1,
    data_type_id: 8,
    project_id: user.project_id,
    county_id: -1, //区
    ent_name: ''
  })
  const staticColumns = [
    {
      title: '序号',
      width: 50,
      render: (_, __, index) => `${index + 1}`,
      align: 'center'
    },
    {
      title: '企业名称',
      dataIndex: 'ent_name',
      key: 'ent_name',
      align: 'center',
      width: 150
    },
    {
      title: '所属区',
      dataIndex: 'county_name',
      key: 'county_name',
      align: 'center',
      width: 100
    },
    {
      title: '所属街镇',
      dataIndex: 'town_name',
      key: 'town_name',
      align: 'center',
      width: 100
    },
    {
      title: '所属行业',
      dataIndex: '',
      key: '',
      align: 'center',
      width: 100
    },
    {
      title: '问题描述',
      dataIndex: '',
      key: '',
      align: 'center',
      width: 100
    },
    {
      title: '下发时间',
      dataIndex: '',
      key: '',
      align: 'center',
      width: 100
    },
    {
      title: '报警类型',
      dataIndex: '',
      key: '',
      align: 'center',
      width: 100
    },
    {
      title: '备注',
      dataIndex: '',
      key: '',
      align: 'center',
      width: 100
    },
    {
      title: '报警后时间段电量',
      dataIndex: '',
      key: '',
      align: 'center',
      width: 100
    }
  ]

  const newColums = staticColumns
  const [columns, setColumns] = useState(newColums)
  const [downLoading, setDownLoading] = useState(false)

  const formatData = (data) => {
    const newData = data.map((item) => {
      const {
        ent_name,
        dev_name,
        dev_type_name,
        town_name,
        county_name,
        ...args
      } = item
      const times = getTimes(args)
      const obj = {
        ent_name,
        dev_name,
        town_name,
        county_name
      }
      times.forEach((time, index) => {
        obj[time] =
          Object.values(args)[index] === -99 ? '--' : Object.values(args)[index]
      })

      return obj
    })
    return newData
  }
  const getParams = () => {
    let newParamsData = {}
    for (let key in paramsData) {
      if (paramsData[key] != (-1 || '-1')) {
        newParamsData[key] = paramsData[key]
      }
    }
    return newParamsData
  }
  const [tableData, pagination, loading, onQuery, , , loadDataAll] =
    useTableData(getDeviceList, {
      params: getParams(),
      formatcb: (data) => formatData(data)
    })

  const getTimes = (data) => {
    return Object.keys(data).map((time) => dayjs(time).format('MM-DD HH:mm'))
  }
  useEffect(() => {
    if (tableData.length) {
      const {
        ent_name,
        dev_name,
        dev_type_name,
        town_name,
        county_name,
        ...args
      } = tableData[0]

      const times = Object.keys(args)
      if (times && times.length) {
        const timeColumns = []
        times.forEach((time, i) => {
          timeColumns.push({
            title: time,
            dataIndex: `${time}`,
            key: `${time}`,
            align: 'center',
            width: 80
          })
        })
        // const mergeColumns = staticColumns.concat(timeColumns)
        setColumns(staticColumns)
      }
    }
  }, [tableData])

  const download = async () => {
    setDownLoading(true)
    const { data } = await loadDataAll()
    const excelData = formatData(data)
    downloadExcelImg(excelData, columns, '设备数据列表')
    setDownLoading(false)
  }
  return (
    <Container>
      <Container.ContainerQuery title="查询条件">
        <Filter
          onQuery={onQuery}
          paramsData={paramsData}
          setParamsData={setParamsData}
        />
      </Container.ContainerQuery>
      <Container.ContainerContent title="查询结果">
        <ExpandLayout
          showBtn={false}
          gutter={10}
          leftSlot={
            <Card
              size="small"
              title="成效追踪列表"
              extra={
                <Button
                  size="small"
                  type="primary"
                  icon={<DownloadOutlined />}
                  loading={downLoading}
                  disabled={!tableData.length}
                  onClick={async () => {
                    setDownLoading(true)
                    await download()
                    setDownLoading(false)
                  }}
                >
                  导出
                </Button>
              }
            >
              <Table
                loading={loading}
                bordered
                columns={columns}
                dataSource={[]}
                size="small"
                pagination={false}
                scroll={{ y: '65vh' }}
              />
            </Card>
          }
          rightSlot={
            <Card size="small" title="最近一次报警后一个月的电量情况">
              AAAAA
            </Card>
          }
        />
      </Container.ContainerContent>
    </Container>
  )
}

export default EquipmentSummary
